<template>
  <div>
    <!--<div>
      <header></header>
    </div>-->
    <div>
      <list-header></list-header>
    </div>
    <div class="content">
      <div class="wrapper">
        <div class="main">
          <p class="update-time">time<span class="has-fresh-text">已更新</span></p>
          <p class="board-content">榜单规则：将昨日国内热映的影片，按照评分从高到低排列取前10名，每天上午10点更新。相关数据来源于“猫眼专业版”及“猫眼电影库”。</p>
          <router-link to="/moviesdetail">
            <ul class="board-wrapper" v-for="item in movieList" :key="item.filmId">
              <li>
                <!--<span class="board-index"></span>-->
                <!--<router-link>-->
                <a href="" class="image-link">
                  <img
                    src="https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png"
                    alt="" class="poster-default">
                  <img :src="item.cover" alt="" class="board-img">
                </a>
                <!--</router-link>-->
                <div class="board-item-main">
                  <div class="board-item-content">
                    <div class="movie-item-info">
                      <p class="name">
                        <a href="">{{item.filmName}}</a>
                      </p>
                      <p class="releasetime">上映时间：{{item.time}}</p>
                    </div>
                    <div class="movie-item-number score-num">
                      <p class="score">
                        <i class="integer">{{item.score}}</i>
                        <!-- <i class="fraction">{{item.score2}}</i>-->
                      </p>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </router-link>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios/index'
  import ListHeader from '@/components/The_list/components/ListHeader'
  /*import Header from '@/components/Header/Header'*/
  export default {
    name: "HotMoviesList",
    components:{
      ListHeader,
      /*Header*/
    },
    data(){
      return{
        movieList: [],
      }
    },
    methods:{
      getHotMoviesList() {
        /*
        * 评分最高的电影
        * 后端:莫育崇 and 赵玺来
        * */
        axios.get('api/filmlist/scorefilm')
          .then(this.getDetail)
          .catch(function (error) {
            console.log(error);
          });
      },
      getDetail(response){
        console.log(response.data);
        this.movieList = response.data
        this.scores = response.data.score
      },
    },
    mounted() {
      this.getHotMoviesList()
    }
  }
</script>

<style lang="css" scoped>
  div {
    display: block;
  }
  .main {
    width: 950px;
    margin: 0 auto;
    margin-top: 70px;
  }
  .update-time {
    text-align: center;
    font-size: 12px;
    color: #999;
  }
  .has-fresh-text {
    color: #ffb400;
    margin-left: 4px;
  }
  .board-content {
    margin-top: 6px;
    color: #999;
    text-align: center;
    font-size: 12px;
  }
  .board-wrapper {
    margin-top: 40px;
  }
  li{
    margin-bottom: 30px;
    font-size: 0;
    position: relative;
    overflow: hidden;
  }
  .board-index {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #f7f7f7;
    font-size: 18px;
    color: #999;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 85px;
  }
  .image-link {
    display: inline-block;
    width: 160px;
    height: 210px;
    margin-left: 80px;
    margin-bottom: 20px;
    position: relative;
    float: left;
  }
  .poster-default {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 62px;
    margin-left: -34px;
    margin-top: -31px;
  }
  .board-img {
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 0;
    width: 160px;
    height: 220px;
  }
  .board-item-main {
    display: inline-block;
    width: 680px;
    margin-left: 30px;
    height: 219px;
    float: right;
    line-height: 219px;
    border-bottom: 1px solid #e5e5e5;
  }
  .board-item-content {
    display: inline-block;
    vertical-align: middle;
    width: 680px;
    font-size: 0;
    line-height: 1;
  }
  .movie-item-info {
    font-size: 16px;
    display: inline-block;
    width: 420px;
    vertical-align: middle;
  }
  p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  .name a {
    font-size: 26px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 420px;
    display: block;
  }
  .movie-item-info .star {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .releasetime {
    margin-top: 8px;
    color: #999;
  }
  .movie-item-number {
    display: inline-block;
    text-align: right;
    width: 260px;
    vertical-align: top;
    margin-top: 10px;
    font-size: 16px;
  }
  .score-num {
    color: #ffb400;
  }
  .score-num .score {
    padding-right: 4px;
  }
  .integer {
    font-size: 56px;
    font-weight: 700;
  }
  .fraction {
    font-size: 26px;
    font-weight: 700;
  }
  a{
    text-decoration: none;
    color: #1a1a1a;
  }
  dd, dl, h4, li, p, ul {
    padding: 0;
    margin: 0;
  }
</style>

